<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllUserApi, startOrStopApi } from '../../api/admin.js'

onMounted(() => {
  onSubmit()
})
const formInline = ref({
  phone: '',
  userType: '',
  createTime: '',
})
//条件查询
const onSubmit = async () => {
  if(!formInline.value.createTime){
    formInline.value.createTime = ''
  }
  if(!formInline.value.userType){
    formInline.value.userType = ''
  }
  const result = await getAllUserApi(formInline.value.phone, formInline.value.userType,
    formInline.value.createTime, currentPage.value, pageSize.value)
  if(result.code){
    userListTable.value = result.data.rows
    total.value = result.data.total
  }else{
    ElMessage.error(result.message)
  }
}
//清空条件
const clear = () => {
  formInline.value = {
    phone: '',
    userType: '',
    createTime: '',
  }
  currentPage.value = 1
  pageSize.value = 6
  onSubmit()
}
// 用户表格数据
const userListTable = ref([
  {
    id: 1,
    username: '花灵序',
    phone: '15332323242',
    avatar: 'https://happy-recycling-station.oss-cn-beijing.aliyuncs.com/happy-recycling-station.png',
    userType: 1,
    status: 0,
    createTime: '2021-01-01 T 10:00:00',
  },
  {
    id: 1,
    username: '花灵序',
    phone: '15332323242',
    avatar: 'https://happy-recycling-station.oss-cn-beijing.aliyuncs.com/happy-recycling-station.png',
    userType: 1,
    status: 1,
    createTime: '2021-01-01 T 10:00:00',
  }
])
//启用禁用用户
const startOrStop = (row) => {
  let status = row.status == 1 ? 0 : 1
  ElMessageBox.confirm(
    `是否要${status == 1 ? '启用' : '禁用'}用户《${row.username}》?`, '提示',
    { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  ).then( async () => {
      const result = await startOrStopApi(status, row.id)
      if(result.code){
        ElMessage.success('修改成功')
        onSubmit()
      }else{
        ElMessage.error(result.message)
      }
    }).catch(() => {})
}
//分页
const total = ref(20)
const currentPage = ref(1)
const pageSize = ref(6)
const background = ref(true)
//每页大小改变时触发
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  onSubmit()
}
//当前页码改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  onSubmit()
}
</script>

<template> 
  <div class="container">
  <h2>用户管理</h2>
  </div>
  <!-- 查询参数 -->
  <div class="container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="电话号码">
        <el-input v-model="formInline.phone" type="number" placeholder="电话号码" />
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select
          v-model="formInline.userType"
          placeholder="选择用户类型"
          clearable
        >
          <el-option label="普通用户" value="1" />
          <el-option label="企业用户" value="2" />
          <el-option label="管理员" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker
          v-model="formInline.createTime"
          type="dateTime"
          placeholder="选择时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 用户列表 -->
  <div class="container"> 
    <el-table :data="userListTable" border style="width: 100%; height: 500px;">
      <el-table-column prop="username" label="用户昵称" width="160"  align="center"/>
      <el-table-column prop="phone" label="手机号" width="160"  align="center"/>
      <el-table-column prop="avatar" label="头像" width="140"  align="center">
        <template #default="scope">
          <img :src="scope.row.avatar" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="userType" label="用户类型" width="150"  align="center">
        <template #default="scope">
          <span v-if="scope.row.userType == 1" type="success">普通用户</span>
          <span v-if="scope.row.userType == 2" type="warning">企业用户</span>
          <span v-if="scope.row.userType == 3" type="warning">管理员</span>
        </template>
      </el-table-column>
      <el-table-column label="用户状态" width="150" align="center" >
        <template #default="scope">
          <span style="display: inline-flex; align-items: center;">
            <svg width="8" height="8" viewBox="0 0 8 8" style="margin-right: 8px;">
              <circle cx="4" cy="4" r="4" :fill="scope.row.status == 1 ? '#67C23A' : '#F56C6C'"/>
            </svg>
            <span>{{ scope.row.status == 1 ? '启用' : '禁用' }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间" width="260"  align="center"/>
      <el-table-column label="操作" align="center">
        <!-- 启用禁用，如果是id=1管理员则不能禁用 -->
        <template #default="scope">
          <el-button type="danger" plain size="small" @click="startOrStop(scope.row)" :disabled="scope.row.status == 0 || scope.row.id == 1">禁用</el-button>
          <el-button type="primary" plain size="small" @click="startOrStop(scope.row)" :disabled="scope.row.status == 1">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[6, 15, 30]"
      :size="size"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
  .container{
    margin: 5px;
  }
  .demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>